<template>
  <div class="p-6 bg-base-200/50 rounded-2xl">
    <CommentItem
      :comment="comment"
      :replies="replies"
      :show-replies="true"
      @toggle-like="handleToggleLike"
      @create-reply="handleCreateReply"
      @report-comment="handleReportComment"
      @delete-comment="handleDeleteComment"
      @reply-click="handleReplyClick"
    >
      <!-- 自定义回复表单插槽 -->
      <template #reply-form="{ comment, replyContent, submitting, onSubmit, onCancel }">
        <div
          class="mt-4 p-4 bg-gradient-to-br from-primary/5 to-secondary/5 rounded-xl border border-primary/20 backdrop-blur-sm"
        >
          <div class="space-y-3">
            <div class="flex items-center gap-2 mb-2">
              <svg
                class="w-4 h-4 text-primary"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                ></path>
              </svg>
              <span class="text-sm font-medium text-primary">回复 @{{ comment.author.name }}</span>
            </div>
            <textarea
              :value="replyContent"
              @input="updateReplyContent"
              placeholder="写下你的回复..."
              class="w-full p-3 bg-base-100 rounded-lg border border-primary/30 focus:border-primary focus:outline-none resize-none transition-colors"
              rows="3"
            ></textarea>
            <div class="flex justify-between items-center">
              <div class="text-xs text-base-content/60">
                还可以输入 {{ 200 - replyContent.length }} 个字符
              </div>
              <div class="flex gap-2">
                <button
                  @click="onCancel"
                  class="px-4 py-2 text-sm text-base-content/60 hover:text-base-content transition-colors duration-200"
                >
                  取消
                </button>
                <button
                  @click="onSubmit(replyContent)"
                  :disabled="!replyContent.trim() || submitting"
                  class="px-4 py-2 text-sm bg-primary text-primary-content rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
                >
                  {{ submitting ? '发送中...' : '发送回复' }}
                </button>
              </div>
            </div>
            <!-- 表情选择器 -->
            <div class="flex gap-1">
              <span class="text-xs text-base-content/60">快速表情:</span>
              <button @click="addEmoji('😀')" class="text-lg hover:scale-125 transition-transform">
                😀
              </button>
              <button @click="addEmoji('😊')" class="text-lg hover:scale-125 transition-transform">
                😊
              </button>
              <button @click="addEmoji('👍')" class="text-lg hover:scale-125 transition-transform">
                👍
              </button>
              <button @click="addEmoji('❤️')" class="text-lg hover:scale-125 transition-transform">
                ❤️
              </button>
              <button @click="addEmoji('🎉')" class="text-lg hover:scale-125 transition-transform">
                🎉
              </button>
            </div>
          </div>
        </div>
      </template>
    </CommentItem>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CommentItem } from '@/components/common/comment'
import type { Comment } from '@/apis/methods/comment.api'

// 评论数据
const comment = ref<Comment>({
  id: '1',
  content:
    '这个示例展示了自定义回复表单插槽的用法。回复表单有渐变背景、字符计数、表情选择器等丰富的功能。',
  author: {
    id: '1',
    name: '表单专家',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=form',
  },
  createdAt: '2024-01-15T10:30:00Z',
  updatedAt: '2024-01-15T10:30:00Z',
  likes: 14,
  isLiked: false,
  replyCount: 1,
  parentId: undefined,
  articleId: '1',
  mentionedUsers: [],
  status: 'approved',
})

// 回复数据
const replies = ref<Comment[]>([
  {
    id: 'r1',
    content: '回复表单功能很丰富！',
    author: {
      id: '2',
      name: '用户',
      avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=user',
    },
    createdAt: '2024-01-15T11:00:00Z',
    updatedAt: '2024-01-15T11:00:00Z',
    likes: 1,
    isLiked: false,
    replyCount: 0,
    parentId: '1',
    articleId: '1',
    mentionedUsers: [],
    status: 'approved',
  },
])

// 事件处理函数
const handleToggleLike = (commentId: string) => {
  const targetComment =
    comment.value.id === commentId ? comment.value : replies.value.find((c) => c.id === commentId)
  if (targetComment) {
    targetComment.isLiked = !targetComment.isLiked
    targetComment.likes += targetComment.isLiked ? 1 : -1
  }
}

const handleCreateReply = (parentId: string, content: string) => {
  console.log('创建回复:', { parentId, content })
}

const handleReportComment = (commentId: string) => {
  console.log('举报评论:', commentId)
}

const handleDeleteComment = (commentId: string) => {
  console.log('删除评论:', commentId)
}

// 这些函数在插槽示例中不需要实际使用，但保留用于演示
// const handleAvatarClick = (author: Comment['author']) => {
//   console.log('点击头像:', author)
// }

// const handleAuthorClick = (author: Comment['author']) => {
//   console.log('点击作者:', author)
// }

// const handleContentClick = (comment: Comment) => {
//   console.log('点击内容:', comment)
// }

const handleReplyClick = (reply: Comment) => {
  console.log('点击回复:', reply)
}

// 回复内容更新处理
const updateReplyContent = (event: Event) => {
  const target = event.target as HTMLTextAreaElement
  // 这里需要通过某种方式更新父组件的replyContent
  // 由于这是插槽示例，我们只是演示功能，实际项目中需要父组件提供更新方法
  console.log('更新回复内容:', target.value)
}

// 添加表情
const addEmoji = (emoji: string) => {
  // 这里需要通过某种方式将表情添加到回复内容中
  // 由于这是插槽示例，我们只是演示功能，实际项目中需要父组件提供更新方法
  console.log('添加表情:', emoji)
}
</script>

<style scoped>
/* 自定义回复表单样式 */
</style>
